*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}
body{
    overflow-x: hidden;
}
.container{
    width: 100%;
    height: 5800px;
    .header{
        width: 100%;
        height: 100px;
        .nav{
            width: 1200px;
            height: 100px;
            margin: auto;
            // background-color: aquamarine;
            display: flex;
            // 两边分布平分剩余空间
            justify-content: space-between;
            
            
            .nav-loge{
                display: flex;
                .loge-a{
                   
                    img{
                        width: 41px;
                        height: 66px;
                        padding-top: 18px;
                    }
                }
                span{
                    font-size: 29px;
                    text-align: center;
                    line-height: 100px;
                    padding-left: 20px;
                    
                }
               
            }
            .nav-right{
               ul{
                display: flex;
                margin-top: 36px;
                a {
                    display: block;
                    font-size: 15px;
                    color: black;
                    margin-right: 32px;
                    
                
                }
               }
            }
        }
    }

      //  轮播图
      #max{
     
        // margin: auto;
        position: absolute;
        // top:  82px;
        width: 100%;
        height:475;
        // align-items: center;
        // margin: 5% auto;
        // margin-top: 0%;
      }
      .re{
        position: relative;
        height: 475px;
      }
      .re ul{
        list-style-type:none ;
      }
      .re ul>li{
        width:600px;
        height: 200px;
        position: absolute;
      
        transition: 1s;
        opacity: 0;
      }
      .re ul>li img{
        width: 1519px;
        height: 475px;
        // border-radius: 10%;
        // border:(5rem / @baseFont) solid pink;
      }
      #max ol {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3,(75px));
        grid-template-rows: auto;
        grid-gap: 1em;gap: 1em;
        float: right;
        margin-top:350px;
        list-style: none;
        top:0;left:0;
      }
      .columns{
        width: 1200px;
        height: 141px;
        margin: auto;
        margin-top: 476px;
       
        z-index: 100;

        ul{
            display: flex;
            justify-content: space-between;
            li{
                width: 249px;
                height: 141px;
                display: flex;
                // justify-content: center;
                flex-wrap: wrap;
                background-color: #fdf4f4;
                border-radius: 6px;
                
           
                // justify-content: space-around;

                img{
                    width: 58px;
                    height: 58px;
                    // display: block
                    margin-left: 96px;
                    margin-top: 34px;
                }
                p{
                    // display: block;
                    text-align: center;
                    width:249px;
                    font-size: 13px;
                }
            }
            li:hover{
                background-color:pink ;
            }
        }
      }
      .content-one{
        width: 1200px;
        height: 676px;
        margin: auto;
        margin-top: 59px;
        p:first-child{
            text-align: center;
            width: 1200px;
            display: block;
            font-size: 40px;
            color: black;
        }
        p:nth-child(2){
        text-align: center;
        width: 1200px;
        display: block;
        font-size: 24px;
        color: #BEBEBE;
        margin-top: 16px;
        }
        // 左侧
        .zuoceguding{
            width: 50px;
            height: 161px;
            z-index: 10;
         
            position: fixed;
            top: 280px;
            right:1px;
            display: flex;
            flex-flow: wrap;
            .zuoceguding-1{
                width: 50px;
                height:80px;
                background-color: rgb(21, 72, 191);
                position: relative;
                border-radius:8px 0 0 0;
                .zuoceguding-1-img{
                    width: 15px;
                    height:15px;
                    position: absolute;
                    top: 34px;
                    left: 18px;
                  
                
                }
            }
            .zuoceguding-2{
                width:50px;
                height:1px;
            }
            .zuoceguding-3{
                width: 50px;
                height:80px;
                background-color: rgb(21, 72, 191);
                position: relative;
                    border-radius:0 0 0 8px;
                    .zuoceguding-3-img{
                        width: 15px;
                        height: 15px;
                        position: absolute;
                        top: 28px;
                        left:18px
                    
                    }
            }
        }
        // zuoce
     ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            margin-top: 28px;
            transition: all 0.4s;
            img{
                width: 263px;
                height: 181px;
                border-radius: 8px;
            }

        }
        li:hover{
            transform: translateY(-8px);
        }
     }
      }
      #p{
        text-align: center;
        width: 1200px;
        display: block;
        font-size: 40px;
        color: black;
        margin-top:88px ;
      }
      .content-two{
        width: 100%;
        background-color: #F5F6FA;
      
        .content-two-top{
            width: 1200px;
            margin: auto;
         
            #p-two{
                font-size: 12px;
                text-align: center;
                // margin-top: 10px;
                // padding-top: 15px;
            }
          
            ul{
                display: flex;
                // justify-content: space-between;
                justify-content: center;
                margin-top: 20px;
    
                li{

                  width:60px;
                  height: 76px;
                  margin-left: 30px;
                    img{
                        width: 50px;
                        height: 50px;
    
                    }
                    p{
                     
                        font-size: 12px;
                    }
                }
            }
        }
        .scroll{
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            margin-top: 30px;
            ul{
                display: flex;
                width: 200%;
                flex-wrap: wrap;
                animation: run 12s linear infinite;

                // align-content: center;
                li{
                    img{
                        width: 123px;
                        height: 273px;
                    }
                }
            }
            ul:hover{
                animation-play-state: paused;
            }
        }


        @keyframes run {
            0%{
                transform: translateX(0px);

            }
            100%{
                transform: translateX(-1000px);
            }
        }

      }
      .content-three{
        width: 100%;
        background-color: #F4775F;
        p:first-child{
        font-size: 40px;
        text-align: center;
        color: #F5F6FA;
        padding-top: 30px;
        }
        p:nth-child(2){
        font-size: 18px;
        text-align: center;
        color: #F5F6FA;
        padding-top: 30px;
        padding-bottom: 30px;
        }
      }
      .form{
        width: 1200px;
        margin: auto;
        position: relative;
        // margin-left: 20px;
      .form-content{
        width: 1170px;
        height: 473px;
        display: flex;
        margin-top: 93px;
        margin-left: 107px;
    
        .form-table{
            display: flex;
            flex-wrap: wrap;
            .ul-one{
                background-color: #4165FC;
                height: 52px;
                display: flex;
                border-radius: 8px 8px 0 0;
                li{
                    font-size: 15px;
                    height: 52px;
                    margin-left: 52px;
                    text-align: center;
                    box-sizing: border-box;
                    padding-right: 45px;
                    line-height: 52px;
                }
            }
            .form-table-content{
                width: 1200px;
                height: 423px;
                overflow: hidden;
             
                .ul-two{
                    display: flex;
                    flex-wrap: wrap;
                    // animation: run 12s linear infinite;
                    animation: runing 18s ease infinite forwards;
                  
                   
                    li{
                        display: flex;
                        font-size: 13px;
                        // margin-left: -35px;
                        height: 52px;
                        border: 1px solid rgb(224, 221, 221);
                        span{
                            margin-left: 47.5px;
                            width: 91px;
                            // text-align: center;
                            line-height: 52px;
                            box-sizing: border-box;
                        }
                        .sp-color{
                            color: gold;
                        }
                    }
                }
                .ul-two:hover{
                    animation-play-state: paused;
                }
                @keyframes runing {
                    0%{
                        transform: translateY(0);
                    }
                    10%{
                        transform: translateY(-53.95px);
                    }
                    20%{
                        transform: translateY(-107.9px);
                    }
                    30%{
                        transform: translateY(-161.85px);
                                                        }
                    40%{
                        transform: translateY(-215.8px);
                    }
                    50%{
                        transform: translateY(-269.75px);
                    }
                    60%{
                        transform: translateY(-323.7px);
                    }
                    70%{
                        transform: translateY(-377.65px);
                    }
                    80%{
                        transform: translateY(-431.6px);
                    }
                    90%{
                        transform: translateY(-485.55px);
                    }
                    100%{
                        transform: translateY(-539.5px);
                    }
                    }
                }
            }
            .form-content-right{
                        display: flex;
                        width: 247px;
                        flex-wrap: wrap;
                        margin-right: 62px;
                        border-radius: 8px;
                        border: 1px solid  greenyellow;
                        justify-content: center;
                        position: absolute;
                        right: 12px;
                        height: 475px;
                        
                        .text{
                            font-size: 15px;
                            text-align: center;
                           width: 120px;
                          height: 20px;
                            // line-height:63px ;
                            margin-top: 15px;
                            margin-left: -72px;
                       
                        }
                        .text::after{
                            content: " ";
                            width: 2px;
                            height: 20px;
                            background-color: #4165FC;
                            position: relative;
                            left: -77px;
                            top: -19px;
                            display: inline-block;
                            
                        }
                     
                   li{
                    border-radius: 8px;
                  
                    display: flex;
                    width:210px ;
                    height: 87px;
                    flex-wrap: wrap;
                    // 阴影
                  box-shadow:0px 3px 6px rgb(44 84 252 / 16%) ;
                    
                    p{
                        font-size: 12px;
                        height: 20px;
                        // width: 100px;
                        margin-left: 82px;
                        margin-top: -75px;
                        span{
                            color: gold;
                        }
                    }
                    .text-p{
                        width: 121px;
                        height: 40px;
                        font-size: 12px;
                        margin-top: -59px;
                   
                    }
                    img{
                        width: 75px;
                        height: 75px;
                    }
                   }
                   li:hover{
                    border: 1px solid  rgb(65, 192, 224);
                   }
           
              .btns{
                .btns-left{
                    img{
                        width: 23px;
                        height: 23px;
                    }
                }
                .btns-right{
                    img{
                        width: 23px;
                        height: 23px;
                        margin-left: 12px;
                    }
                }
           }     } 
        
        }
        .ul-four{
            display: flex;
            margin-top: 49px;
            margin-left: 107px;
       
            li{
                position: relative;
                img{
                    width: 257px;
                    height: 159px;
                }
                .sp-one{
                    position: absolute;
                    top: 31px;
                    left:39px ;
                    font-size: 50px;
                    color: aliceblue;
                }
                .text-two{
                    position: absolute;
                    top: 60px;
                    left:98px;
                    color: #ffffff;
                    font-size: 12px;
                    p:first-child{
                        font-size: 20px;
                    }
               
                }
            }
        }
   }
   .content-six{
    width: 100%;
    height: 500px;
    background-color: #f5f6fa;
    margin-top: 15px;
    .content-s{
        width: 1200px;
        height: 500px;
        margin: auto;
        display: flex;
        // margin-left: 107px;
        position: relative;
        .dot{
            height: 13px;
            position: absolute;
           right: 80px;
           top: 43px;
       
            ul{
                display: flex;
                li{
                    width: 13px;
                    height: 13px;
                    border-radius: 50%;
                    background-color: #BEBEBE;
                    margin-left: 26px;
               
                }
            }
            .cle-one{
                position: absolute;
                top: 38px;
                right: -2px;
               }
               .cle-two{
                position: absolute;
                top: 74px;
                right: -2px;
               }
               .cle-three{
                position: absolute;
                top: 108px;
                right: -2px;
               }
               .cle-four{
                position: absolute;
                top: 141px;
                right: -2px;
               }
        }
    
        .content-s-left{
            width: 460px;
            height: 500px;
            margin-left: 107px;
    
            h1{
                margin-top: 87px;
            }
            p:nth-child(2){
                font-size: 20px;
                margin-top: 20px;
                margin-bottom: 45px;
            }
            p:nth-child(3){
              width: 392px;
              height: 117px;
              color: #BEBEBE;
            }
            p:nth-child(4){
                font-size: 20px;
                margin-top: 40px;
            }
        }
        .content-s-right{
            width: 600px;
            height: 500px;
            position: relative;
            img{
                width: 517px;
                height: 367px;
                position: absolute;
                top: 84px;
                left: 1px;
            }
        }
    }
   }
   .map{
    margin-top: 40px;
    width: 100%;
    height: 834px;
    .map-img{
        width: 1500px;
        height: 824px;
        margin: auto;
        background: url(../imgs/中国地图.png) no-repeat;
        background-size: 913px  750px;
        position: relative;
        p:first-child{
            font-size: 27px;
            color: black;
            position: absolute;
            top: 76px;
            right: 295px;
        }
        p:nth-child(2){
            font-size: 23px;
            color: #BEBEBE;
            position: absolute;
            top: 121px;
            right: 296px;
        }
        .map-content{
            position: absolute;
            right: 269px;
            top: 220px;
            width: 332px;
            height: 315px;
         box-shadow: 0 6px 24px rgb(44 84 252 / 16%);
        //  overflow: hidden;
        // 滚动条
     
        
        
         ul{
            width: 100%;
            height: 315px;
        overflow-y:scroll;
        // 滚动条背景色与宽度
        &::-webkit-scrollbar{
            width: 5px;
            height: 305px;
            background-color: #2a2c30;
            border-radius: 8px;
           }

        &::-webkit-scrollbar-thumb{
            background-color: #4165FC;
            -webkit-box-shaow: inset 0 0 5px rgba(44, 84, 15, 0.2);
            border-radius: 8px;
        }
            li{
                font-size: 14px;
                margin-top: 20px;
                color: #BEBEBE;

                i{
                    width: 10px;
                    height: 10px;
                    background-color: #4165FC;
                    border-radius: 50%;
                    display: inline-block;
                    
                    box-sizing: border-box;
                    margin-right: 35px;
                    margin-left: 58px;
                  
            }
         }
        }
    
   }
      }

   }
   .teacher-content{
    width: 1200px;
    height: 750px;
    margin: auto;
    margin-top: 59px;
    p:first-child{ 
        font-size: 40px;
  text-align: center;


    }
    p:nth-child(2){
        font-size: 20px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 29px;
        color: #BEBEBE;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 239px;
            height: 302px;
            overflow: hidden;
            position: relative;
            transition: all .1s linear;
          
            img{
                width: 239px;
                height: 302px;
            }
            div{
                width: 179px;
                height: 244px;
                // background-color: #08090A;
                display: inline-block;
                position: absolute;
                top: 180px;
                left: 30px;
                border-radius: 8px;
                font-size: 14px;
                transition: all .6s linear;
                // box-shadow:0px 3px 6px rgb(44 84 252 / 16%) ;
                background-color: rgba(0, 0, 0, 0.5);
                color: #ffffff;
                p{
                    span{
                        color: #F76F44;
                    }
                }
            }
            div:hover{
                display: inline-block;
                position: absolute;
                top: 24px;
                // left: 30px;
            }
        }
        li:hover{
           transform: translateY(-8px)
        }
    }

   }
  
}





